import React from 'react';
import './App.css';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';

import {
    //BrowserRouter as Router,
    //Route,
    withRouter,
    Link,
    //Switch,
    //Prompt,
    //HashRouter

} from 'react-router-dom'
import  RouterList  from './common/router';

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;






class App extends React.Component {
  state = {
    collapsed: false,
  };
    constructor(props) {
        super(props);
              console.log('app',this.props.history)
        this.props.history.listen((location)=>{
            console.log(location.pathname)
            switch(location.pathname){
                case '/home':
                    document.title="主页";
                    break;
                case '/test1/testpage':
                    document.title="params传参数";
                    break;
                case '/test4':
                    document.title="一级路由入口";
                    break;
                case '/test4/test5':
                    document.title="二级路由效果";
                    break;
                default:break;
            }
        })
    }
  onCollapse = (collapsed) => {
  console.log(collapsed);
  this.setState({ collapsed });
}

render() {
  return (

      <Layout style={{ minHeight: '100vh' }}>
<Sider
  collapsible
  collapsed={this.state.collapsed}
  onCollapse={this.onCollapse}
>
<div className="logo" />
      <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
      <Menu.Item key="1">
      <Icon type="pie-chart" />
      <span>Option 1</span>
  </Menu.Item>
  <Menu.Item key="2">
      <Icon type="desktop" />
      <span>Option 2</span>
  </Menu.Item>
  <SubMenu
  key="sub1"
  title={<span><Icon type="user" /><span>User</span></span>}
>
<Menu.Item key="3">Tom</Menu.Item>
      <Menu.Item key="4">Bill</Menu.Item>
      <Menu.Item key="5">Alex</Menu.Item>
      </SubMenu>
      <SubMenu
  key="sub2"
  title={<span><Icon type="team" /><span>Team</span></span>}
>
<Menu.Item key="6">Team 1</Menu.Item>
  <Menu.Item key="8">Team 2</Menu.Item>
  </SubMenu>
  <Menu.Item key="9">
      <Icon type="file" />
      <span>File</span>
      </Menu.Item>
      </Menu>
      </Sider>
      <Layout>
      <Header style={{ background: '#fff', padding: 0 }} />
<Content style={{ margin: '0 16px' }}>
<Breadcrumb style={{ margin: '16px 0' }}>
<Breadcrumb.Item>User</Breadcrumb.Item>
  <Breadcrumb.Item>Bill</Breadcrumb.Item>
  </Breadcrumb>
  <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>


              <Link to="/home">Home</Link>
      <br/>
              <Link to={{ pathname: '/test1/testpage'}} >sendParams</Link>
      <br/>
      <br/>
      <Link to={{ pathname: '/test2' , search:'?day=Friday' }}>sendQuery</Link>
      <br/>
      <Link to={{ pathname: '/test4' }}>一级路由</Link>
      <RouterList />


  </div>
  </Content>
  <Footer style={{ textAlign: 'center' }}>
  Ant Design ©2016 Created by Ant UED
  </Footer>
  </Layout>
  </Layout>

);
}
}
export default withRouter(App);
